<template>
   <div class="perfrom-page">
       <!-- 头部 -->
       <div class="head">
           <img  class="back" src="../../assets/perfromImg/jiantou.png" alt="" @click="returnPage">
           <div class="title">业绩看板</div>
           <!-- <img src="../../assets/perfromImg/set.png" class="set" alt=""> -->
       </div>
       <!-- 个人信息 -->
       <div class="infromion">
           <div class="infor">
               <img src="https://xinbei.51ggzs.cn/uploads/20210105/90541f662eba51ccc035f4acd3593c09.png" class="headimg" alt="">
               <div class="user">
                   <span class="name">{{userinfo.nickname}}</span>
                   <span class="phone">{{userinfo.mobile | starPhone}}</span>
               </div>
           </div>
       </div>
        <!--收入状况  -->
        <div class="income">
            <div class="income-head">
                <div class="left">
                    <img class="imgs" src="../../assets/perfromImg/tiao.png" alt="">
                    <span class="gaikuan">收入概况</span>
                </div>
                <div class="right">单位:元</div>
            </div>
            <div class="estimate">
                <div class="title">预估收入</div>
                <div class="est-price">{{tm1}}</div>
            </div>
            <div class="mine-box">
                <div class="mine-head">
                    <img src="../../assets/perfromImg/ty.png" class="ty" alt="">
                    <span>我的</span>
                </div>
                <div class="mine-price">
                    <div  v-for="(item,index) in myestimateList" :key="index+'1'">
                        <div class="credit" v-if="item.scene_type=='信用卡'">
                            <div class="credit-title">{{item.scene_type}}</div>
                            <div class="credit-price">{{item.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item1,index1) in myestimateList" :key="index1+'2'">
                        <div class="credit" v-if="item1.scene_type=='贷款'">
                            <div class="credit-title">{{item1.scene_type}}</div>
                            <div class="credit-price">{{item1.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item2,index2) in myestimateList" :key="index2+'3'">
                        <div class="credit" v-if="item2.scene_type=='征信'">
                            <div class="credit-title">{{item2.scene_type}}</div>
                            <div class="credit-price">{{item2.allProfit}}</div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="mine-box">
                <div class="mine-head">
                    <img src="../../assets/perfromImg/ty.png" class="ty" alt="">
                    <span>团队</span>
                </div>
                <div class="mine-price">

                    <div  v-for="(item,index) in teamestimateList" :key="index+'1'">
                        <div class="credit" v-if="item.scene_type=='信用卡'">
                            <div class="credit-title">{{item.scene_type}}</div>
                            <div class="credit-price">{{item.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item1,index1) in teamestimateList" :key="index1+'2'">
                        <div class="credit" v-if="item1.scene_type=='贷款'">
                            <div class="credit-title">{{item1.scene_type}}</div>
                            <div class="credit-price">{{item1.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item2,index2) in teamestimateList" :key="index2+'3'">
                        <div class="credit" v-if="item2.scene_type=='征信'">
                            <div class="credit-title">{{item2.scene_type}}</div>
                            <div class="credit-price">{{item2.allProfit}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="estimate" style="margin-top:.6rem">
                <div class="title">已实现收益</div>
                <div class="est-price" style="color:#FE4242">{{count2}}</div>
            </div>


             <div class="mine-box">
                <div class="mine-head">
                    <img src="../../assets/perfromImg/ty.png" class="ty" alt="">
                    <span>我的</span>
                </div>
                <div class="mine-price">
                    <div  v-for="(item,index) in myrealizeList" :key="index+'a'">
                        <div class="credit" v-if="item.scene_type=='信用卡'">
                            <div class="credit-title">{{item.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item1,index1) in myrealizeList" :key="index1+'b'">
                        <div class="credit" v-if="item1.scene_type=='贷款'">
                            <div class="credit-title">{{item1.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item1.allProfit}}</div>
                        </div>
                    </div>
                   <div  v-for="(item2,index2) in myrealizeList" :key="index2+'c'">
                        <div class="credit" v-if="item2.scene_type=='征信'">
                            <div class="credit-title">{{item2.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item2.allProfit}}</div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="mine-box">
                <div class="mine-head">
                    <img src="../../assets/perfromImg/ty.png" class="ty" alt="">
                    <span>团队</span>
                </div>
                <div class="mine-price">
                     <div  v-for="(item,index) in teamrealizeList" :key="index+'a'">
                        <div class="credit" v-if="item.scene_type=='信用卡'">
                            <div class="credit-title">{{item.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item.allProfit}}</div>
                        </div>
                    </div>
                    <div  v-for="(item1,index1) in teamrealizeList" :key="index1+'b'">
                        <div class="credit" v-if="item1.scene_type=='贷款'">
                            <div class="credit-title">{{item1.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item1.allProfit}}</div>
                        </div>
                    </div>
                   <div  v-for="(item2,index2) in teamrealizeList" :key="index2+'c'">
                        <div class="credit" v-if="item2.scene_type=='征信'">
                            <div class="credit-title">{{item2.scene_type}}</div>
                            <div class="credit-price" style="color:#F04343">{{item2.allProfit}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 一周收益 -->
        <div class="week-income">
            <div class="week-head">
                <div class="left">
                    <img src="../../assets/perfromImg/ls.png" alt="">
                    <span class="sy">一周收益情况</span>
                    <span class="dw">单位:元</span>
                </div>
                <div class="right">
                     <div v-for="(item,index) in earnList" :key="index" @click="bindEarn(index)">
                          <span class="teams" :class="earnIndex===index?'earns':''">{{item.name}}</span>
                     </div>
                </div>
            </div>
            <div id="myCharts" ref="myCharts" style="width: 8.54rem;height:5.3rem;"></div>
        </div>
        <!-- 进件 -->
        <div class="entry">
            <div class="entry-head">
                <div class="left">
                    <span class="line"></span>
                    <span class="title">营业额</span>
                </div>
                <div class="right">
                    <div class="right-r">
                       <input type="radio" value="1" @click="checkRadios(type)" v-model="type" checked name="times">
                       <span>月</span>
                    </div>
                    <div class="right-r">
                       <input type="radio" value="2" @click="checkRadios(type)"  v-model="type" name="times">
                       <span>日</span>
                    </div>
                    <div class="right-r">
                       <input type="radio" value="3" @click="checkRadios(type)" v-model="type" name="times">
                       <span>周</span>
                    </div>
                </div>
            </div>

             <div class="tab-box">
                 <div class="tab-head">
                     <div class="left">团队</div>
                     <div class="right">
                         <span>征信</span>
                         <span>信用卡</span>
                         <span>贷款</span>
                     </div>
                 </div>
               <div class="boxs">
                   <div class="tab-item" v-for="(item,index) in caretList" :key="index">
                        <div class="left">{{item.name}}</div>
                            <div class="right">
                                <span v-if="item.zx.allMoney==null">0</span>
                                <span v-else>{{item.zx.allMoney}}</span>
                                <span v-if="item.xyk.allMoney==null">0</span>
                                <span v-else>{{item.xyk.allMoney}}</span>
                                <span v-if="item.dk.allMoney==null">0</span>
                                <span v-else>{{item.dk.allMoney}}</span>
                            </div>
                    </div>      
                </div>  
             </div>
        </div>
        <!-- 营业额 -->
        <div class="volumn">
                <div class="entry-head">
                <div class="left">
                    <span class="line"></span>
                    <span class="title">进件</span>
                </div>
                <div class="right">
                    <div class="right-r">
                       <input type="radio" value="1" v-model="types" @click="checkRadio(types)" checked name="time">
                       <span>月</span>
                    </div>
                    <div class="right-r">
                       <input type="radio" value="2" @click="checkRadio(types)" v-model="types" name="time">
                       <span>日</span>
                    </div>
                    <div class="right-r">
                       <input type="radio" value="3" @click="checkRadio(types)" v-model="types" name="time">
                       <span>周</span>
                    </div>
                </div>
            </div>

             <div class="tab-box">
                 <div class="tab-head">
                     <div class="left">团队</div>
                     <div class="right">
                         <span>征信</span>
                         <span>信用卡</span>
                         <span>贷款</span>
                     </div>
                 </div>
               <div class="boxs">
                   <div class="tab-item" v-for="(item,index) in busList" :key="index">
                        <div class="left">{{item.name}}</div>
                            <div class="right">
                                <span v-if="item.zx.allCount==null">0</span>
                                <span v-else>{{item.zx.allCount}}</span>
                                <span v-if="item.xyk.allCount==null">0</span>
                                <span v-else>{{item.xyk.allCount}}</span>
                                <span v-if="item.dk.allCount==null">0</span>
                                <span v-else>{{item.dk.allCount}}</span>
                            </div>
                    </div>          
                </div>  
             </div>

        </div>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import {userData,jyData} from "../../sever/request"
import {mineData,teamData,chartsData} from "../../sever/team"
export default {
    components:{
        echarts
    },
        data() {
            return {
                userinfo:{},
                earnList:[
                    {name:'团队'},
                    {name:'我的'}
                ],
                earnIndex:0,
               token:"ce464971-b7da-4ea9-b5e8-fd5bb286482b",
                 user_id:481,
                 myestimateList:[],
                 myrealizeList:[],
                 teamestimateList:[],
                 teamrealizeList:[],
                 caretList:[],
                 busList:[],
                 type:1,
                 types:1,
                 shop_id:132,
                 esti:null,
                 reali:null,
                 tm1:0,
                 count2:0
            }
        },
        mounted() {

              

            this.initChart()
            this.getUserInfoData()
            this.getMydata()
            this.getTeamdata()
            this.getCartDatas()
            this.getCartData()
            
        },


        created() {
             let store = this.$route.query;
                if (store.shop_id != undefined) {
                this.shop_id = store.shop_id;
                }
                if (store.user_id != undefined) {
                  this.user_id = store.user_id;
                }
                if (store.token != "" && store.token != undefined) {
                this.token = store.token;
               }
        },

        filters:{
            starPhone(phoneNum){
                let str =  String(phoneNum),
                strLen = str.slice(-8,-4);
                return str.replace(strLen,"****");
            } 
        },

        methods: {
            bindEarn(index){
                 if(this.earnIndex===index){
                     return
                 }
                 this.earnIndex=index
                 this.initChart()
            },


            //返回上一页
			returnPage() {
				uni.navigateBack({
					delta: 1
				});
			},
           checkRadio(types){
              this.getCartDatas(types)
           },
           checkRadios(type){
              this.getCartData(type)
           },

            getUserInfoData(){
                  userData({
                     token:this.token
                  }).then((res)=>{
                      if(res.data.code==1){
                          this.userinfo=res.data.data
                      }
                  })
            },


            getCartData(type){
               jyData({
                  shop_id:this.shop_id,
                  type:type,
                  token:this.token
               }).then((res)=>{
                   if(res.data.code==1){
                       this.caretList=res.data.data
                   }
               })
            },
            getCartDatas(types){
               jyData({
                  shop_id:this.shop_id,
                  type:types,
                  token:this.token
               }).then((res)=>{
                   if(res.data.code==1){
                       this.busList=res.data.data
                   }
               })
            },


             getMydata(){
                    mineData({
                        user_id:this.user_id,
                        token:this.token
                    }).then((res)=>{
                        if(res.data.code==1){
                          this.myestimateList=res.data.data.预估收人;
                          this.tm1 = 0;
                          for(let i in this.myestimateList){
                              let data = this.myestimateList[i];
                              if(data.scene_type == "信用卡"||data.scene_type == "贷款"||data.scene_type == "征信"){
                                  this.tm1 +=parseFloat(data.allProfit);
                              }
                          }
                          this.myrealizeList=res.data.data.已实现收益
                           this.count2 = 0;
                          for(let i in this.myrealizeList){
                              let data = this.myrealizeList[i];
                              if(data.scene_type == "信用卡"||data.scene_type == "贷款"||data.scene_type == "征信"){
                                  this.count2 +=parseFloat(data.allProfit);
                              }
                          }
                      }
                    })
             },
             getTeamdata(){
                    teamData({
                        user_id:this.user_id,
                        token:this.token
                    }).then((res)=>{
                        if(res.data.code==1){
                          this.teamestimateList=res.data.data.预估收人
                          this.teamrealizeList=res.data.data.已实现收益
                      }
                    })
             },



            initChart(){
                   // 基于准备好的dom，初始化echarts实例
               var chartDom = document.getElementById('myCharts');
               var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                // var option;
               myChart.setOption ({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '收益金额',
                            type: 'bar',
                            barWidth: '60%',
                            data: []
                        }
                    ],

                });
                if(this.earnIndex==0){
                        chartsData({
                            user_id:this.user_id,
                            token:this.token
                        }).then((res)=>{
                            if(res.data.code==1){
                                let charts=res.data.data.team
                                let nameData=[]
                                let dateData=[]
                                let obj={}
                                charts.forEach(item => {
                                    obj.name=item.allProfit
                                    obj.date=item.time.slice(6,11)
                                    nameData.push(obj.name)
                                    dateData.push(obj.date)
                                });
                            myChart.setOption ({
                                    xAxis: [
                                            {
                                                type: 'category',
                                                data: dateData,
                                                axisTick: {
                                                    alignWithLabel: true
                                                }
                                            }
                                        ],
                                    series: [
                                        {
                                            name: '收益金额',
                                            type: 'bar',
                                            barWidth: '60%',
                                            data: nameData
                                        }
                                    ],
                            })
                        }
                    })
                }else if(this.earnIndex==1){
                               chartsData({
                                user_id:this.user_id,
                                token:this.token
                            }).then((res)=>{
                                if(res.data.code==1){
                                    let charts=res.data.data.my
                                    let nameData=[]
                                    let dateData=[]
                                    let obj={}
                                    charts.forEach(item => {
                                        obj.name=item.allProfit
                                        obj.date=item.time.slice(6,11)
                                        nameData.push(obj.name)
                                        dateData.push(obj.date)
                                    });
                                myChart.setOption ({
                                        xAxis: [
                                                {
                                                    type: 'category',
                                                    data: dateData,
                                                    axisTick: {
                                                        alignWithLabel: true
                                                    }
                                                }
                                            ],
                                        series: [
                                            {
                                                name: '收益金额',
                                                type: 'bar',
                                                barWidth: '60%',
                                                data: nameData
                                            }
                                        ],
                                })
                                }
                    })
                }

                // 使用刚指定的配置项和数据显示图表。
            //   option && myChart.setOption(option);
            },
        },
}
</script>
<style lang="less" scoped>
   .perfrom-page{
       width: 10rem;
       .head{
           width: 10rem;
           height: 1.906667rem;
           background: linear-gradient(24deg, #37A8FC 0%, #297EF6 100%);
           display: flex;
           justify-content: flex-start;
           align-items: center;
           .back{
               width: .24rem;
               height: .426667rem;
               margin-left: .266667rem;
               margin-top: .4rem;
           }
           .title{
               font-size: .44rem;
               color: #FFFFFF;
               margin-top: .4rem;
               margin-left: 3.966667rem;
           }
           .set{
               width: .4rem;
               height: .4rem;
               margin-right: .266667rem;
               margin-top: .4rem;
           }
       }
       .infromion{
            width: 10rem;
            height: 2.346667rem;
            background: #FFFFFF;
            box-shadow: 0px .133333rem .266667rem 0px rgba(238, 238, 238, 0.8);
            margin-top: .2rem;
            .infor{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                .headimg{
                    width: 1.933333rem;
                    height: 1.933333rem;
                    margin-left: .506667rem;
                    margin-top: .133333rem;
                }
                .user{
                    margin-left: .16rem;
                    margin-top: .64rem;
                    .name{
                        display: block;
                        font-size: .44rem;
                        color: #333;
                    }
                    .phone{
                        display: block;
                        font-size: .386667rem;
                        color: #333;
                        margin-top: .333333rem;
                    }
                }
            }
       }
       .income{
            width: 9.733333rem;
            min-height: 15.44rem;
            background: #FFFFFF;
            box-shadow: 0px .133333rem .266667rem 0px rgba(238, 238, 238, 0.8);
            border-radius: .533333rem;
            margin: .213333rem auto;
            .income-head{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin:0  .333333rem;
                padding-top: .333333rem;
                .left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .imgs{
                        width: .08rem;
                        height: .4rem;
                    }
                    .gaikuan{
                        font-size: .426667rem;
                        font-weight: bold;
                        color: #2C2C2C;
                        margin-left: .266667rem;
                    }
                }
                .right{
                    font-size: .266667rem;
                    font-weight: bold;
                    color: #A2A2A2;
                }
            }
            .estimate{
                text-align: center;
                margin: .373333rem  2rem;
                .title{
                    font-size: .373333rem;
                    font-weight: bold;
                    color: #2C2C2C;
                }
                .est-price{
                    font-size: .573333rem;
                    font-weight: bold;
                    color: #FBB537;
                    margin-top: .426667rem;
                }
            }

            .mine-box{
                margin-top: .48rem;
                margin-left: .453333rem;
                .mine-head{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .ty{
                       width: .106667rem;
                       height: .106667rem; 
                    }
                    span{
                        font-size: .373333rem;
                        font-weight: bold;
                        margin-left: .266667rem;
                        color: #2C2C2C;
                    }
                }
                .mine-price{
                       display: flex;
                       justify-content: flex-start;
                       align-items: center;
                       margin-top: .266667rem;
                      .credit{
                          width: 3rem;
                          height: 2.16rem;
                          text-align: center;
                          line-height: 1.16rem;
                          border-right: 1px solid #E6E6E6;
                          .credit-title{
                              font-size: .32rem;
                              font-weight: bold;
                              color: #A2A2A2;
                          }
                          .credit-price{
                              font-size: .4rem;
                              font-weight: bold;
                              color: #F4C255;
                          }
                      }
                }
            }
       }


       .week-income{
            width: 9.733333rem;
            height: 7rem;
            background: #FFFFFF;
            box-shadow: 0px .133333rem .266667rem 0px rgba(238, 238, 238, 0.8);
            border-radius: .533333rem;
            margin: .213333rem auto 0;
            .week-head{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: .453333rem 0  0 .293333rem;
                    img{
                        width: .08rem;
                        height: .4rem;
                    }
                    .sy{
                        font-size: .426667rem;
                        font-weight: bold;
                        color: #2C2C2C;
                        margin-left:.266667rem ;
                    }
                    .dw{
                         font-weight: bold;
                         color: #A2A2A2; 
                         margin-left: .213333rem; 
                    }
                }
                .right{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                     margin: .453333rem  .293333rem  0  0 ;
                    .teams{
                        width: .8rem;
                        height: .533333rem;
                        display: inline-block;
                        text-align: center;
                        line-height: .533333rem;
                        font-size: .266667rem;
                        font-weight: bold;
                        color: #7D7C7C;
                        background-color: #ccc;
                    }
                    .earns{
                        width: .8rem;
                        height: .533333rem;
                        display: inline-block;
                        text-align: center;
                        font-size: .266667rem;
                        color: #FCFCFC;
                        font-weight: bold;
                        line-height: .533333rem;
                        background-color: #1E76DA;
                    }
                }
            }
            #myCharts{
                 margin: 0 auto;
            }
       }

       .entry{
            width:9.733333rem;
            height: 5rem;
            background: #FFFFFF;
            box-shadow: 0px .133333rem .266667rem 0px rgba(238, 238, 238, 0.8);
            border-radius: .533333rem;
            margin: .213333rem auto;
            .entry-head{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: .48rem .293333rem  0  .293333rem;
                .left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .line{
                        width: .08rem;
                        height: .4rem;
                        background: linear-gradient(0deg, #20C5DD 0%, #2ED6B4 100%);
                        border-radius: .04rem;
                        display: inline-block;
                    }
                    .title{
                        margin-left: .266667rem;
                        font-size: .426667rem;
                        color: #2C2C2C;
                        font-weight: bold;
                        display: inline-block;
                    }
                }
                .right{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .right-r{
                        display: flex;
                        justify-content: flex-start;
                        margin-right: .4rem;
                        span{
                            font-size: .333333rem;
                            font-weight: bold;
                            color: #2C2C2C;
                            margin-left: .133333rem;
                        }
                    }
                }
            }
            .tab-box{
                    width: 8.666667rem;
                    height: .613333rem;
                    margin: .266667rem auto 0;
                .tab-head{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        width: 50%;
                        font-size: .24rem;
                        color: #A2A2A2;
                        margin-left:.133333rem;
                    }
                    .right{
                        width: 50%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span{
                            font-size: .24rem;
                            color: #A2A2A2;
                        }
                    }
                }
                .boxs{
                       width:8.666667rem;
                       height:3rem;
                       scrollbar-width: none;
						overflow: hidden;
						overflow-y: auto;
                    .tab-item{
                            width: 8.666667rem;
                            height: .613333rem;
                            border-bottom: 1px #E6E6E6 solid;
                            margin: .133333rem auto 0;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .left{
                                width: 50%;
                                font-size: .24rem;
                                color: #A2A2A2;
                            }
                            .right{
                                width: 50%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                span{
                                    font-size: .266667rem;
                                    font-weight: bold;
                                    color: #27CDC9;
                                }
                            } 
                        }
                }
            }
            
       }
       .volumn{
            width:9.733333rem;
            height: 5rem;
            background: #FFFFFF;
            box-shadow: 0px .133333rem .266667rem 0px rgba(238, 238, 238, 0.8);
            border-radius: .533333rem;
            margin: .213333rem auto;
            .entry-head{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: .48rem .293333rem  0  .293333rem;
                .left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .line{
                        width: .08rem;
                        height: .4rem;
                        background: linear-gradient(0deg, #20C5DD 0%, #2ED6B4 100%);
                        border-radius: .04rem;
                        display: inline-block;
                    }
                    .title{
                        margin-left: .266667rem;
                        font-size: .426667rem;
                        color: #2C2C2C;
                        font-weight: bold;
                        display: inline-block;
                    }
                }
                .right{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .right-r{
                        display: flex;
                        justify-content: flex-start;
                        margin-right: .4rem;
                        span{
                            font-size: .333333rem;
                            font-weight: bold;
                            color: #2C2C2C;
                            margin-left: .133333rem;
                        }
                    }
                }
            }
            .tab-box{
                    width: 8.666667rem;
                    height: .613333rem;
                    margin: .266667rem auto 0;
                .tab-head{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        width: 50%;
                        font-size: .24rem;
                        color: #A2A2A2;
                        margin-left:.133333rem;
                    }
                    .right{
                        width: 50%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span{
                            font-size: .24rem;
                            color: #A2A2A2;
                        }
                    }
                }
                .boxs{
                       width:8.666667rem;
                       height:3rem;
                       scrollbar-width: none;
						overflow: hidden;
						overflow-y: auto;
                    .tab-item{
                            width: 8.666667rem;
                            height: .613333rem;
                            border-bottom: 1px #E6E6E6 solid;
                            margin: .133333rem auto 0;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .left{
                                width: 50%;
                                font-size: .24rem;
                                color: #A2A2A2;
                            }
                            .right{
                                width: 50%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                span{
                                    font-size: .266667rem;
                                    font-weight: bold;
                                    color: #3A92E2;
                                }
                            } 
                        }
                }
            }
       }
   }
</style>